<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/angular-1.5.8/angular.js"></script>
    <style>
        .c {
            width: 200px;
            height: 50px;
            border: 1px dashed blue;
        }
    </style>
</head>
<!--这里使用ng-app表明让ng处理整个body标签-->
<body ng-app>
<!--在文本框中输入数据，在另一个文本标签中显示该数据-->
<input type="text" ng-model="txt"/>
<!--
在页面中有一个input标签
页面中一旦有了一个ng-app那么表明这就是一个view，整个被ng-app描述的标签就是view
即在背后就会创建一个对象，这个对象在ng中记为$rootScope这个对象就是viewModel
现在界面中有一个input文本框如果希望这个文本框中的数据由view维护的话
就需要在文本框中提供ng-model的属性同时命名
此时就表明在背后的viewModel中有一个同名的属性，即$rootscope中有一个txt属性
一旦界面中的数据发生变化。$rootscope中的txt的值也会随之变化
-->

<div class="c">{{txt}}</div>
<!--
首先使用了语法{{}}，该语法称为插值语法，是ng中的独有语法，相当于模板求值
该雨大中应该放置ng表达式，会将表达式的值显示在该区域

如果该区域使用了名字
1 需要了解该标签输入哪一个viewModel
2 根据名字，在显示的时候 就会到对应的viewModel中取该名字的数据（如果数据不存在则不显示也不报错）


此时又构成一次双向数据绑定
-->
</body>
</html>